import {Button, Form, Input, Flex, Select, message} from "antd";
import CommonModel from "@/components/common/CommonModel";
import {useRef, useState} from "react";
import { useSearchParams } from 'react-router-dom'
import {addFolder} from "@/api/file.ts";

interface IModelRef {
    showModal: () => void
    handleCancel: (cb?: () => void) => void
    handleOk: (cb?: () => void) => void
}

interface IProps {
    getList: () => void
}

const CreateFolder = ({ getList }: IProps) => {
    const modelRef = useRef(null)
    const [form] = Form.useForm()
    const [searchParams] = useSearchParams()
    const [initValue] = useState<{ fileName: string, state: string }>({
        fileName: '',
        state: '0'
    })
    const [options] = useState([
        { label: '私有', value: '0' },
        { label: '公开', value: '1' }
    ])
    const showModal = () => {
        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
        modelRef.current && (modelRef.current as IModelRef).showModal()
    }
    const handleCancel = () => {
        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
        modelRef.current && (modelRef.current as IModelRef).handleCancel(() => {
            form.setFieldsValue(initValue)
        })
    }
    const finish = (values: { fileName: string, state: string }) => {
        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
        modelRef.current && (modelRef.current as IModelRef).handleOk( async () => {
            const { fileName, state } = values
            const response = await addFolder({ fileName, state, type: 'folder', parentFileUID: searchParams.get('fileUID') || '0' })
            if (response.code === 200) {
                message.success('创建成功')
                getList()
                form.setFieldsValue(initValue)
            } else {
                message.error('创建失败')
            }
        })
    }
    return (
        <CommonModel
            close={handleCancel}
            ref={modelRef}
            title={'新建文件夹'}
            btn={<Button type='primary' onClick={showModal}>新建文件夹</Button>}
            content={
                <Form form={form} initialValues={initValue} onFinish={finish}>
                    <Form.Item name='fileName' label='文件夹名称' labelCol={{ span: 5 }} wrapperCol={{ span: 19 }} rules={[{required: true, message: '文件夹不能为空'}]}>
                        <Input />
                    </Form.Item>
                    <Form.Item name='state' label='类型' labelCol={{ span: 5 }} wrapperCol={{ span: 19 }} rules={[{required: true, message: '类型不能为空'}]}>
                        <Select options={options} />
                    </Form.Item>
                    <Form.Item>
                        <Flex gap='middle' wrap justify='end'>
                            <Button onClick={handleCancel}>取消</Button>
                            <Button type='primary' htmlType="submit">确定</Button>
                        </Flex>
                    </Form.Item>
                </Form>
            }
        />
    )
}

export default CreateFolder